<template>
<div>
  <loading :isShow="showLoading"></loading>
  <home-header :city="city"></home-header>
  <home-swiper :list="swiperList"></home-swiper>
  <home-icons :list="iconList"></home-icons>
  <home-recommend :list="recommendList"></home-recommend>
  <home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import HomeIcons from './components/Icons'
  import HomeRecommend from './components/Recommend'
  import HomeWeekend from './components/Weekend'
  import Loading from '../loading'
  import axios from 'axios'
  import {mapState} from 'vuex'
  Vue.prototype.search = new Vue();
  export default{
    components:{
      HomeRecommend, 'home-header': HomeHeader,
      'home-swiper': HomeSwiper,
      'home-icons': HomeIcons,
      'home-recommend': HomeRecommend,
      'home-weekend': HomeWeekend,
      'loading': Loading
    },
    mounted: function(){
      this.lastCity = this.$store.state.city;
      this.getHomeInfo();
    },
    data:function(){
      return {
        lastCity:'',
        city:'',
        swiperList:[],
        iconList:[],
        recommendList:[],
        weekendList:[],
        showLoading:true
      }
    },
//    computed:{
//      ...mapState(['city']),
//    },
    methods:{
      getHomeInfo:function(){
//        这块在index.js的代理机制被替换了
//        代码
//        proxyTable: {
//          '/api':{
//            target:'http://localhost:8080',
//            pathRewrite: {
//              '^/api':'/static/mock'
//            }
//          }
//        }
        var that =this;
        axios.get('/api/index.json?city=' + this.$store.state.city).then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc:function(res){
        if(res.data.ret && res.data){
        this.showLoading = false;
        var data = res.data.data;
        this.city = data.city;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
        }
      }
    },
    //生命周期：首次进入页面的时候mounted和activated都会执行，但是设置过keep-alive以后mounted被缓存了就不去加载了，但是activated还是会去加载
    //这样就能解决keep-alive页面重新被现实ajax重绘问题了
    activated:function(){
      //判断城市是否相同，如果不同就重新发送ajax请求
      if(this.lastCity !== this.$store.state.city){
        this.lastCity = this.$store.state.city;
        this.getHomeInfo();
      }
    }
  }
</script>
<style>
</style>
